<!--<link href="./res/css/manage.css" rel="stylesheet" type="text/css" />-->
<div class="os-header">
    <div class="os-header-box">
        <a class="header-nav-item" href="${base!}/" style="vertical-align: inherit;font-size:23px;color:#FFFFFF;margin-top:10px;">个人博客</a>
        <div>
        <a class="header-nav-item" href="${base!}/" style="vertical-align: inherit;background-color:RGB(49,51,53);margin-top:10px;color:#FFFFFF;">博文列表</a>
        </div>
        <a class="header-nav-item" href="http://www.yeyixiao.com" style="vertical-align: inherit;background-color:RGB(49,51,53);margin-top:10px;color:#FFFFFF;">个人网站</a>
        <a class="header-nav-item" href="https://space.bilibili.com/510993086" style="vertical-align: inherit;background-color:RGB(49,51,53);margin-top:10px;color:#FFFFFF;">B站账号</a>
        <div class="header-nav">
            <!--<input type="text" class="header-search" placeholder="搜索喜欢的博文" />
            <input type="button" class="header-search-btn" onclick="window.location.href='${base!}/courses/'" value="搜索" />-->
        </div>
        <div class="header-nav" style="float: right">
            <a href="${base!}/add" target="_blank" class="header-nav-item" style="color:#FFFFFF">添加博文</a>

            <!--<#if (user.username)??>
            <a href="${base!}/uhome" class="header-nav-item" id="userinfo">${user.username!}</a>
            <#else>
            <a href="${base!}/login" class="header-nav-item">登录/注册</a>
        </#if>-->

</div>
</div>
</div>

<!-- 登录之后显示用户的基本信息-start -->
<div id="userinfoHtml" style="display:none;padding:10px;">
    <div>
        <span>用户名</span>
    </div>

    <div style="width:220px;height:60px;"></div>

    <div>
        <a class="link-a" href="${base!}/logout">
            <span class="os-color">退出</span>
        </a>
    </div>
</div>
<!-- 登录之后显示用户的基本信息-end -->
<script type="text/javascript">
    $(function(){
        $("#userinfo").popover({
            trigger:'manual',
            placement : 'bottom',
            html: true,
            animation: false,
            content : $('#userinfoHtml').html()
        }).on("mouseenter", function () {
            let that = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function () {
                $(that).popover('hide');
            });
        }).on("mouseleave", function () {
            let that = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(that).popover("hide")
                }
            }, 500);
        });
    });
</script>